{template '../web_common/header'}

<!-- 中间内容 -->
<div class="mainContent clearfix">
    <div class="center-con clearfix">
        <h2 class="main-ttl">标签库</h2>
        <div class="main-ctn clearfix">
            <div class="col-sm-12 pad0">
                <div class="col-sm-12 pad0">
                    <div class="item clearfix">
                        <span>标签名称：</span>
                        <input type="text" class="input-text" name="label_name" placeholder="请输入标签名称">

                        <button type="button" class="Btn ml10" id="search">筛选</button>
                        <button type="button" class="Btn ml10" id="add" >添加标签</button>
                        <button type="button" class="Btn ml10" id="execl" onclick='window.location.href="{php echo $this->createWebUrl('label', array('act' => 'excelLabel'));}"'>导入</button>
                    </div>

                    <table data-toggle="table" id="cusTable"></table>

                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    require(['jquery', 'bootstrap-table', 'bootstrap-table-zh-CN', 'layer', 'common'], function ($) {
        initTable();

        //跳转分页
        $('body').on('click', '.gotoPage', function () {
            $('#cusTable').bootstrapTable('selectPage', +$('#gotopage-num').val());
        });

        $('#search').on('click', function () {
            var label_name = $('input[name="label_name"]').val();
            if (label_name.length === 0) {
                layer.msg('请输入标签名', {time: 1000});
                return false;
            }
            initTable();
        });
        $('input[name="label_name"]').on('keydown', function (e) {
            if (e.keyCode === 13) {
                var label_name = $(this).val();
                if (label_name.length === 0) {
                    layer.msg('请输入标签名', {time: 1000});
                    return false;
                }
                initTable();
            }
        });

        $('#add').on('click', function () {
            layer.prompt({title: '请填写标签名(最多8个字)', formType: 0, value: '', maxlength: 8, success: function (layero, index) {
                $(".layui-layer-input").on('keydown',function(e){
                    if(e.keyCode === 13){
                        var label_name = $(this).val();
                        var data = {
                            label_name: label_name,
                            label_id: "",
                            token: "{$_W['token']}"
                        };
                        addLabel(data);
                    }
                });
            }}, function(value, index, elem){
                var data = {
                    label_name: value,
                    label_id: "",
                    token: "{$_W['token']}"
                };
                addLabel(data);
            });
        });
    });

    function initTable() {
        //先销毁表格
        $('#cusTable').bootstrapTable('destroy');
        //初始化表格,动态从服务器加载数据
        $("#cusTable").bootstrapTable({
            method: "get",  //使用get请求到服务器获取数据
            url: "{php echo $this->createWebUrl('label',array('act' => 'index'))}", //获取数据的Servlet地址
            striped: true,  //表格显示条纹
            height: 458,

            pagination: true, //启动分页
            paginationLoop: false,//禁用无限循环的功能
            pageSize: 10,  //每页显示的记录数
            pageNumber: 1, //当前第几页
            pageList: [5, 10, 25, 50],  //记录数可选列表

            clickToSelect: true,
            search: false,  //是否启用查询
            toolbar:"#toolbar",
            showColumns: false,  //显示下拉框勾选要显示的列
            showRefresh: false,  //显示刷新按钮
            sidePagination: "server", //表示服务端请求
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order

            queryParamsType : "limit",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    limit: params.limit,
                    offset: params.offset,

                    label_name:$('input[name=label_name]').val()
                };
                return param;
            },
            columns: [
                {field: "index",title: "序号",align: 'center',valign: 'middle',width:'7%'},
                {field: "label_name",title: "标签名",visible: true,align: 'center',valign: 'middle'},
                {field: "update_time",title: "最后编辑时间",visible: true,align: 'center',valign: 'middle',width:'15%' },
                {field: "author",title: "编辑人",visible: true,align: 'center',valign: 'middle',width:'15%' },

                {field: "label_id",title: '操作',align: 'center',valign: 'middle',width: '15%',formatter:function(value, row, index){
                    content = '&nbsp;&nbsp;' + '<a class="text-primary" onclick="edit_label('+value+')" href="javascript:;" data-toggle="tooltip" data-placement="bottom" title="编辑" data-original-title="编辑">编辑</a>' + '&nbsp;&nbsp;' + '<a class="text-primary" href="javascript:;" onclick="del_type('+value+')"  data-toggle="tooltip" data-placement="bottom" title="删除" data-original-title="删除">删除</a>';
                    return content;
                }}
            ],
            onLoadSuccess: function(){  //加载成功时执行

            },
            onLoadError: function(){  //加载失败时执行
                //
            },
            onClickRow:function (index, $element) {}
        });
    }

    //删除标签
    function del_type(label_id) {
        layer.confirm('确定删除该数据吗?', function () {
            $.get("{php echo $this->createWebUrl('label', array('act' => 'del'))}", {label_id: label_id}, function(data){
                if(data.code === 1){
                    layer.msg(data.msg,{icon: 1,time:1000});
                    setTimeout(function () {
                        initTable();
                    }, 1000);
                }else{
                    layer.msg(data.msg,{icon: 0,time:1000});
                    return false;
                }
            })
        });
    }

    //添加标签
    function addLabel(data) {
        $.post("{php echo $this->createWebUrl('label', array('act' => 'operate'))}", data, function (data) {
            layer.closeAll();
            if(data.code === 200){
                layer.msg(data.msg, {icon: 1,time:1000});
                setTimeout(function () {
                    initTable();
                }, 1000)
            } else {
                layer.msg(data.msg, {icon: 0,time:1000});
                return false;
            }
        });
    }

    //修改标签
    function edit_label(label_id) {
        if (label_id.length === 0) {
            layer.msg('参数有误', {time: 1000});
            return false;
        }

        $.post("{php echo $this->createWebUrl('label', array('act' => 'getLabel'))}", {label_id: label_id}, function (data) {
            if (data.code === 200) {
                var label_id = data.label.label_id;
                layer.prompt({title: '请填写标签名(最多8个字)', formType: 0, value: data.label.label_name, maxlength: 8, success: function (layero, index) {
                    $(".layui-layer-input").on('keydown',function(e){
                        if(e.keyCode === 13){
                            var label_name = $(this).val();
                            var data = {
                                label_name: label_name,
                                label_id: label_id,
                                token: "{$_W['token']}"
                            };
                            addLabel(data);
                        }
                    });
                }}, function(value, index, elem){
                    var data = {
                        label_name: value,
                        label_id: label_id,
                        token: "{$_W['token']}"
                    };
                    addLabel(data);
                });
            } else {
                layer.msg(data.msg, {time: 1000});
            }
        });

    }
</script>

{template '../web_common/footer'}